import {useNavigate,useSearchParams} from 'react-router-dom'
import {useState,useEffect,useMemo} from 'react'
import axios from 'axios'
import { Sticky, NavBar,Sidebar,Toast,Button,Stepper,Popup } from 'react-vant';


export default function List() {
  let navigate=useNavigate()
  let [list,setList]=useState([])
  const [active, setActive] = useState(0);
  let [id]=useSearchParams()
  let ids=id.get('id')
  let shangjianame=id.get('name')
  let [car,setCar]=useState([])
  let [show, setShow] = useState(false);
  // console.log(ids);
  useEffect(()=>{
    getlist()
    getcar()
  },[])
  let getlist=async()=>{
    let {data}=await axios.get('http://localhost:3000/datalist')
    console.log(data);
    if(data.code===200){
      setList(data.data)
    }
  }
  let addcar=async(item)=>{
    let {data}=await axios.post('http://localhost:3000/addcar',{item})
    console.log(data);
    if(data.code===200){
      Toast.success('购物车添加成功')
      getcar()
    }
  }
  let getcar=async()=>{
    let {data}=await axios.get('http://localhost:3000/datacar')
    console.log(data);
    if(data.code===200){
      setCar(data.data)
    }
  }
  let jia=async(id)=>{
    let {data}=await axios.post('http://localhost:3000/jia',{id})
    console.log(data);
    if(data.code===200){
      Toast.success('购物车添加成功')
      getcar()
    }
  }
  let jian=async(id)=>{
    let {data}=await axios.post('http://localhost:3000/jian',{id})
    console.log(data);
    if(data.code===200){
      Toast.success('购物车减少成功')
      getcar()
    }
  }
  let getjiage=useMemo(()=>{
    let sum=0
    car.forEach(item=>{
      sum+=item.price*item.num
    })
    return sum
  },[car])

  let delcar=async(id)=>{
    let {data}=await axios.post('http://localhost:3000/delcar',{id})
    console.log(data);
    if(data.code===200){
      Toast.success('购物车删除成功')
      getcar()
    }
  }
  let delall=async()=>{
    let {data}=await axios.post('http://localhost:3000/delall')
    console.log(data);
    if(data.code===200){
      Toast.success('购物车删除成功')
      setShow(false)
      getcar()
    }
  }
  return (
    <div>
        <Sticky>
          <NavBar
            title={shangjianame}
            onClickLeft={() => navigate('/')}
          />
        </Sticky>
        <div>
            <Sidebar
                value={active}
                onChange={(v) => {
                  setActive(v);
                  Toast.info(`内容区 ${v + 1}`);
                }}
                style={{height:'300px'}}
              >
                <Sidebar.Item contentStyle={{ backgroundColor: '#fff', padding: '18px 10px' }} title="内容1">
                  {
                    list.filter(item=>item.shangjia===ids).map((item,index)=>{
                      return(
                        <div key={index} style={{display:'flex',marginBottom:'10px'}}>
                          <img src={item.img} style={{width:'100px',height:'100px'}} alt="" />
                          <div style={{display:'flex',flexDirection:'column',marginLeft:'10px',justifyContent:'space-around'}}>
                            <p>{item.name}</p>
                            <p style={{color:'red',fontSize:'18px'}}>￥{item.price}</p>
                            {
                              car.find(item1=>item1._id===item._id)? 
                              <Stepper
                              value={car.find(item1=>item1._id===item._id).num}
                              onOverlimit={() => console.log('overlimit')}
                              onMinus={() => jian(item._id)}

                              onPlus={() => jia(item._id)}
                              onChange={v => console.log(v)}
                              min={1}
                            />:
                            <Button type='primary' onClick={()=>addcar(item)}>加入购物车</Button>
                            }
                          </div>
                        </div>
                      )
                    })
                  }
                </Sidebar.Item>
                <Sidebar.Item contentStyle={{ backgroundColor: '#fff', padding: '18px 10px' }} title="内容2">
                  我是内容区2
                </Sidebar.Item>
                <Sidebar.Item contentStyle={{ backgroundColor: '#fff', padding: '18px 10px' }} title="内容3">
                  我是内容区3
                </Sidebar.Item>
              </Sidebar>
        </div>
        <div style={{width:'80%',height:'50px',border:'1px solid red',position:'fixed',bottom:'10px',margin:'0 10%',borderRadius:'80px',backgroundColor:'#fff',display:'flex',justifyContent:'space-around',alignItems:'center'}}>
           <p style={{color:'red',fontSize:'18px'}}>￥{getjiage}</p>
           <Button type='danger' onClick={()=>setShow(true)}>去结算</Button>
        </div>
        <Popup
        visible={show}
        closeable
        style={{ height: '50%',paddingTop:'5%' }}
        position='bottom'
        round
        onClose={() => setShow(false)}
        >
          <Button type='danger' style={{width:'120px',height:'40px'}} onClick={()=>delall()}>清除购物车</Button>
          {
            car.map((item,index)=>{
              return(
                <div key={index} style={{display:'flex',marginBottom:'10px'}}>
                  <img src={item.img} style={{width:'100px',height:'100px'}} alt="" />
                  <div style={{display:'flex',flexDirection:'column',marginLeft:'10px',justifyContent:'space-around'}}>
                    <p>{item.name}<span style={{color:'red',marginLeft:'10px'}} onClick={()=>delcar(item._id)}>X</span></p>
                    <p style={{color:'red',fontSize:'18px'}}>￥{item.price*item.num}</p>
                    <Stepper
                      value={item.num}
                      onOverlimit={() => console.log('overlimit')} // 超出限制时的回调
                      onMinus={() => jian(item._id)} // 减号按钮点击时的回调
                      onPlus={() => jia(item._id)} // 加号按钮点击时的回调
                      onChange={v => console.log(v)} // 数值变化时的回调
                      min={1} // 最小值
                    />
                  </div>
                </div>
              )
            })

          }
        </Popup>
    </div>
  )
}
